// 🎨 vilan-admin-v1 菜单样式优化
// 参考：art-design-pro + vue-pure-admin 最佳实践

// ======================== 样式变量 ========================
$menu-height: 46px;                    // 菜单项高度
$menu-icon-size: 18px;                 // 图标大小
$menu-font-size: 14px;                 // 字体大小
$menu-border-radius: 6px;              // 圆角大小
$menu-item-margin: 4px;                // 菜单项间距
$menu-item-padding: 8px;               // 左右内边距
$submenu-indent: 16px;                 // 子菜单缩进

// 亮色主题 hover 背景色
$hover-bg-light: rgba(0, 0, 0, 0.04);
// 暗色主题 hover 背景色
$hover-bg-dark: rgba(255, 255, 255, 0.08);

// ======================== 通用菜单样式 ========================
.vilan-menu {
  border: none !important;
  background: transparent !important;
  
  // ---------------------- 菜单项基础样式 ----------------------
  .el-menu-item,
  .el-sub-menu__title {
    height: $menu-height !important;
    line-height: $menu-height !important;
    margin-bottom: $menu-item-margin;
    border-radius: $menu-border-radius;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: $menu-font-size;
    
    // 图标样式
    .el-icon {
      font-size: $menu-icon-size;
      transition: all 0.2s;
    }
    
    // 文字样式
    span {
      font-size: $menu-font-size;
      transition: all 0.2s;
    }
  }
  
  // ---------------------- 一级菜单项样式 ----------------------
  &:not(.el-menu--collapse) {
    .el-menu-item {
      width: calc(100% - #{$menu-item-padding * 2});
      margin-left: $menu-item-padding;
      margin-right: $menu-item-padding;
      padding-left: 16px !important;
      
      &:hover {
        background: $hover-bg-light !important;
      }
      
      // 激活状态
      &.is-active {
        position: relative;
        background: var(--el-color-primary-light-9) !important;
        color: var(--el-color-primary) !important;
        font-weight: 500;
        
        .el-icon {
          color: var(--el-color-primary) !important;
        }
        
        // 左侧激活指示器（art-design-pro light 主题风格）
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 60%;
          background: var(--el-color-primary);
          border-radius: 0 2px 2px 0;
        }
      }
    }
    
    // ---------------------- 子菜单标题样式 ----------------------
    .el-sub-menu__title {
      width: calc(100% - #{$menu-item-padding * 2});
      margin-left: $menu-item-padding;
      margin-right: $menu-item-padding;
      padding-left: 16px !important;
      padding-right: 16px !important;
      
      &:hover {
        background: $hover-bg-light !important;
      }
      
      // 箭头图标
      .el-sub-menu__icon-arrow {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 12px !important;
        color: rgba(0, 0, 0, 0.45) !important;
        transition: all 0.2s !important;
        margin-left: 8px !important;
        position: relative !important;
        right: auto !important;
        float: none !important;
      }
    }
    
    // 子菜单激活时的标题样式
    .el-sub-menu.is-active {
      > .el-sub-menu__title {
        color: var(--el-color-primary) !important;
        
        .el-icon {
          color: var(--el-color-primary) !important;
        }
        
        .el-sub-menu__icon-arrow {
          display: inline-block !important;
          visibility: visible !important;
          color: var(--el-color-primary) !important;
        }
      }
    }
    
    // ---------------------- 嵌套子菜单样式 ----------------------
    .el-menu {
      background: transparent !important;
      
      .el-menu-item {
        padding-left: calc(16px + #{$submenu-indent}) !important;
        min-width: auto;
        
        &:hover {
          background: $hover-bg-light !important;
        }
        
        &.is-active {
          background: var(--el-color-primary-light-9) !important;
          color: var(--el-color-primary) !important;
          font-weight: 500;
          
          .el-icon {
            color: var(--el-color-primary) !important;
          }
          
          &::before {
            display: none; // 二级菜单不显示左侧指示器
          }
        }
      }
    }
  }
  
  // ---------------------- 折叠状态样式 ----------------------
  &.el-menu--collapse {
    width: 64px;
    
    .el-menu-item,
    .el-sub-menu__title {
      margin: 4px 0;
      padding: 0 !important;
      border-radius: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .el-icon {
        margin-right: 0 !important;
        font-size: 20px;
      }
      
      &:hover {
        background: $hover-bg-light !important;
      }
    }
    
    .el-menu-item.is-active {
      position: relative;
      background: transparent !important;
      color: var(--el-color-primary) !important;
      
      .el-icon {
        color: var(--el-color-primary) !important;
      }
      
      // 折叠时的左侧激活指示器（vue-pure-admin 风格）
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 24px;
        background: var(--el-color-primary);
        border-radius: 0 2px 2px 0;
      }
    }
    
    .el-sub-menu.is-active {
      > .el-sub-menu__title {
        color: var(--el-color-primary) !important;
        
        .el-icon {
          color: var(--el-color-primary) !important;
        }
      }
    }
    
    // 隐藏箭头
    .el-sub-menu__icon-arrow {
      display: none;
    }
  }
}

// ======================== 暗色主题适配 ========================
html.dark {
  .vilan-menu {
    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        background: $hover-bg-dark !important;
      }
    }
    
    &:not(.el-menu--collapse) {
      .el-menu-item {
        &.is-active {
          background: rgba(var(--el-color-primary-rgb), 0.15) !important;
          color: var(--el-color-primary) !important;
        }
      }
      
      .el-sub-menu__title {
        .el-sub-menu__icon-arrow {
          display: inline-block !important;
          visibility: visible !important;
          color: rgba(255, 255, 255, 0.45) !important;
        }
      }
      
      .el-menu {
        .el-menu-item {
          &:hover {
            background: $hover-bg-dark !important;
          }
          
          &.is-active {
            background: rgba(var(--el-color-primary-rgb), 0.15) !important;
            color: var(--el-color-primary) !important;
          }
        }
      }
    }
    
    &.el-menu--collapse {
      .el-menu-item,
      .el-sub-menu__title {
        &:hover {
          background: $hover-bg-dark !important;
        }
      }
      
      .el-menu-item.is-active {
        background: transparent !important;
      }
    }
  }
}

// ======================== 弹出菜单样式（折叠时） ========================
.el-menu--popup {
  padding: 6px !important;
  border-radius: 8px !important;
  
  .el-menu-item,
  .el-sub-menu__title {
    height: 40px !important;
    line-height: 40px !important;
    margin-bottom: 2px;
    border-radius: 6px;
    
    &:hover {
      background: $hover-bg-light !important;
    }
    
    &.is-active {
      background: var(--el-color-primary-light-9) !important;
      color: var(--el-color-primary) !important;
      
      .el-icon {
        color: var(--el-color-primary) !important;
      }
    }
  }
  
  // 暗色主题
  html.dark & {
    .el-menu-item,
    .el-sub-menu__title {
      &:hover {
        background: $hover-bg-dark !important;
      }
      
      &.is-active {
        background: rgba(var(--el-color-primary-rgb), 0.15) !important;
        color: var(--el-color-primary) !important;
      }
    }
  }
}

// ======================== 响应式适配 ========================
@media only screen and (max-width: 768px) {
  .vilan-menu {
    .el-menu-item,
    .el-sub-menu__title {
      margin-left: 4px;
      margin-right: 4px;
      width: calc(100% - 8px);
    }
  }
}

// ======================== 禁用Element Plus默认动画 ========================
.vilan-menu {
  .el-sub-menu__title,
  .el-menu-item {
    // 禁用默认的慢速transition（art-design-pro优化）
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

// ======================== 菜单折叠/展开动画优化 ========================
.el-menu--inline {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

